<template>
  <el-container>
    <el-header>
      <Pagetitle :title="title1" :SecTitle="title2"></Pagetitle>
    </el-header>
    <el-main class="pagination-padding">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="名称">
          <el-input
            v-model="formInline.name"
            placeholder="请输入问题名称"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="formInline.status" placeholder="请选择" clearable>
            <el-option label="启用" value="启用"></el-option>
            <el-option label="禁用" value="禁用"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addSubmit">添加</el-button>
        </el-form-item>

        <el-table :data="tableData" style="width: 100%" class="table-radius">
          <el-table-column
            prop="accidentType"
            label="事故类型"
            width="250px"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="creationTime" label="创建时间" align="center">
          </el-table-column>
          <el-table-column
            prop="state"
            label="状态"
            align="center"
          ></el-table-column>
          <el-table-column label="操作" width="250px" align="center">
            <template slot-scope="scope">
              <el-button
                type="info"
                size="mini"
                plain
                @click="seeInfoBtn(scope.$index, scope.row)"
                >查看</el-button
              >
              <el-button
                type="warning"
                size="mini"
                plain
                @click="editInfo(scope.$index, scope.row)"
                >编辑</el-button
              >
              <el-button
                type="danger"
                size="mini"
                plain
                @click="DeleMessageBox(scope.$index, scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-form>
      <!-- 添加的弹出框 -->
      <el-dialog title="添加" :visible.sync="addDialogFormVisible">
        <el-form
          ref="addForm"
          :label-position="labelPosition"
          :label-width="formLabelWidth"
          :model="addForm"
          :rules="rules"
        >
          <el-form-item label="事故类型" prop="AccidentType">
            <el-input
              v-model="addForm.AccidentType"
              placeholder="请输入事故类型"
            ></el-input>
          </el-form-item>
          <el-form-item label="状态" prop="state">
            <el-radio-group v-model="addForm.state">
              <el-radio label="启用"></el-radio>
              <el-radio label="禁用"></el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="addDialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addSure('addForm')"
            >确 定</el-button
          >
        </div>
      </el-dialog>

      <!-- 查看的弹出框 -->
      <el-dialog
        title="查看"
        :visible.sync="InfoDialogTableVisible"
        :center="true"
      >
        <el-descriptions :column="1" border size="medium">
          <el-descriptions-item label="事故类型">{{
            seeInfoTable.accidentType
          }}</el-descriptions-item>
          <el-descriptions-item label="状态">{{
            seeInfoTable.state
          }}</el-descriptions-item>
        </el-descriptions>
        <div slot="footer" class="dialog-footer">
          <el-button @click="InfoDialogTableVisible = false">返回</el-button>
        </div>
      </el-dialog>
      <!-- 编辑的弹出框 -->
      <el-dialog title="编辑" :visible.sync="EditDialogFormVisible">
        <el-form
          ref="seeInfoTable"
          :label-position="labelPosition"
          :label-width="formLabelWidth"
          :model="seeInfoTable"
          :rules="rules2"
        >
          <el-form-item label="事故类型" prop="accidentType">
            <el-input v-model="seeInfoTable.accidentType"></el-input>
          </el-form-item>
          <el-form-item label="状态" prop="state">
            <el-radio-group v-model="seeInfoTable.state">
              <el-radio label="启用"></el-radio>
              <el-radio label="禁用"></el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="EditDialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="editSure('seeInfoTable')"
            >确定</el-button
          >
        </div>
      </el-dialog>
    </el-main>
    <!-- 分页 -->
    <el-main class="pagination-padding">
      <Paging
        @pagesizeChange="getPagesize"
        @currentPageChange="getCurrentPage"
        :total="total"
        :pagesize="pagesize"
        :currentPage="currentPage"
      ></Paging>
    </el-main>
  </el-container>
</template>

<script>
import Pagetitle from "../../components/common/title.vue";
import Paging from "../../components/paging/paging.vue";
export default {
  data() {
    return {
      title1: "预案管理",
      title2: "事故类型",
      total: 5, //总共多少条，这个需要通过接口获取后赋值
      pagesize: 4,
      currentPage: 1,
      //搜索框
      formInline: { name: "", status: "" },
      //表单数据
      tableData: [],
      //添加弹出框数据
      addDialogFormVisible: false,
      //查看弹窗
      InfoDialogTableVisible: false,
      //编辑弹窗
      EditDialogFormVisible: false,
      editId: 1,
      labelPosition: "top", //改变文字所在位置
      //添加表单的数据
      addForm: {
        AccidentType: "",
        state: "",
      },
      //编辑表单的数据
      editForm: {
        AccidentType: "",
        state: "",
      },
      //查看存储
      seeInfoTable: {
        accidentType: "",
        state: "",
      },
      formLabelWidth: "80px",
      //验证
      rules: {
        AccidentType: [
          { required: true, message: "必须输入事故类型", trigger: "blur" },
        ],
        state: [{ required: true, message: "必须选择状态", trigger: "blur" }],
      },
      rules2: {
        accidentType: [
          { required: true, message: "必须输入事故类型", trigger: "blur" },
        ],
        state: [{ required: true, message: "必须选择状态", trigger: "blur" }],
      },
    };
  },
  components: {
    Pagetitle,
    Paging,
  },
  methods: {
    //子组件传入pagesize
    getPagesize(val) {
      this.pagesize = val;
      let status = this.SecstatusTransfer(this.formInline.status);
      this.getListData(
        this.currentPage,
        this.pagesize,
        this.formInline.name,
        status
      );
    },
    //子组件传入CurrentPage
    getCurrentPage(val) {
      this.currentPage = val;
      let status = this.SecstatusTransfer(this.formInline.status);
      this.getListData(
        this.currentPage,
        this.pagesize,
        this.formInline.name,
        status
      );
    },

    //获取数据
    async getListData(page, pagesize, accidentType, status) {
      const { data: res } = await this.axios({
        method: "POST",
        url: "/accident/list",
        data: {
          page: page,
          pageSize: pagesize,
          accidentType: accidentType,
          state: status,
        },
       
      });
      console.log(res);
      if (res.code == 0) {
        this.total = res.count;
        res.data.forEach((item) => {
          let newTime = this.timeTransfer(item.creationTime);
          item.creationTime = newTime;
          item.state = this.statusTransfer(item.state);
        });
        // console.log(res.data)
        this.tableData = res.data;
      }
    },
    //添加接口
    async addData(accidentType, status) {
      const { data: res } = await this.axios({
        method: "POST",
        url: "/accident/add",
        data: {
          accidentType: accidentType,
          state: status,
        },
       
      });
      console.log(res);
      if (res.code == 0) {
        let status = this.SecstatusTransfer(this.formInline.status);
        this.getListData(
          this.currentPage,
          this.pagesize,
          this.formInline.name,
          status
        );
      }
      // console.log(res);
    },
    //删除接口
    async deleData(deleId) {
      const { data: res } = await this.axios({
        method: "get",
        url: "/accident/delete/" + deleId,
       
      });
      // console.log(res)
      if (res.code == 0) {
        this.tableData.length = this.tableData.length - 1;
        if (this.tableData.length == 0) {
          this.currentPage = this.currentPage - 1;
        }
        let status = this.SecstatusTransfer(this.formInline.status);
        this.getListData(
          this.currentPage,
          this.pagesize,
          this.formInline.name,
          status
        );
      }
      // console.log(res)
    },
    //查看接口
    async seeInfo(seeId) {
      const { data: res } = await this.axios({
        method: "post",
        url: "/accident/" + seeId,
       
      });
      // console.log(res);
      if (res.code == 0) {
        //console.log(this.seeInfoTable);
        this.seeInfoTable.accidentType = res.data.accidentType;
        this.seeInfoTable.state = this.statusTransfer(res.data.state);
      }
    },
    //编辑接口调用
    async editData(id, accidentType, status) {
      const { data: res } = await this.axios({
        method: "POST",
        url: "/accident/update",
        data: {
          id: id,
          accidentType: accidentType,
          state: status,
        },
        
      });
      //console.log(res);
      if (res.code == 0) {
        let status = this.SecstatusTransfer(this.formInline.status);
        this.getListData(
          this.currentPage,
          this.pagesize,
          this.formInline.name,
          status
        );
      }
    },

    //查询函数
    onSubmit() {
      this.currentPage = 1;
      let status = this.SecstatusTransfer(this.formInline.status);
      this.getListData(
        this.currentPage,
        this.pagesize,
        this.formInline.name,
        status
      );
    },
    //添加函数
    addSubmit() {
      this.addDialogFormVisible = true;
    },
    //添加确定按钮
    addSure(formName) {
      this.addForm.state = this.SecstatusTransfer(this.addForm.state);
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.addData(this.addForm.AccidentType, this.addForm.state);

          this.addDialogFormVisible = false;
        } else {
          this.$message.error("验证失败!");
        }
      });
      this.addForm.AccidentType = "";
      this.addForm.state = "";
    },
    //查看函数
    seeInfoBtn(index, row) {
      this.InfoDialogTableVisible = true;
      this.seeInfo(row.id);
    },
    //编辑函数
    editInfo(index, row) {
      this.EditDialogFormVisible = true;
      this.seeInfo(row.id);
      this.editId = row.id;
    },
    //编辑弹框的确定按钮
    editSure(formName) {
      //调用后台
      this.seeInfoTable.state = this.SecstatusTransfer(this.seeInfoTable.state);
      // console.log(this.seeInfoTable.status);
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.editData(
            this.editId,
            this.seeInfoTable.accidentType,
            this.seeInfoTable.state
          );
          this.EditDialogFormVisible = false;
        } else {
          this.$message.error("验证失败!");
        }
      });
    },
    //删除按钮函数
    DeleMessageBox(index, row) {
      let that = this;
      this.$confirm("此操作将删除该记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          //在这里调用后台
          this.deleData(row.id);
          /* that.tableData.some((item) => {
            console.log(item, row);
            if (item.id == row.id) {
              that.tableData.splice(index, 1);
            }
          }); */
          this.$message({
            type: "success",
            message: "删除成功!",
            duration: 700,
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
            duration: 700,
          });
        });
    },
    //时间戳的转换
    timeTransfer(timestamp) {
      var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var Y = date.getFullYear() + "-";
      var M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      var D =
        (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
      var h =
        (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
      var m =
        (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
        ":";
      var s =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      return Y + M + D + h + m + s;
    },
    //状态转换:数字转文字
    statusTransfer(statusTemp) {
      if (statusTemp == 0) {
        statusTemp = "禁用";
      } else if (statusTemp == 1) {
        statusTemp = "启用";
      }
      return statusTemp;
    },
    //状态转换:文字转数字
    SecstatusTransfer(statusTemp) {
      if (statusTemp == "禁用") {
        statusTemp = 0;
      } else if (statusTemp == "启用") {
        statusTemp = 1;
      }
      return statusTemp;
    },
  },
  created() {
    let status = this.SecstatusTransfer(this.formInline.status);
    this.getListData(
      this.currentPage,
      this.pagesize,
      this.formInline.name,
      status
    );
  },
};
</script>

<style lang="less" scoped>
.pagination-padding {
  padding: 20px 0;
}
.table-radius {
  border-radius: 5px;
}
</style>
